<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/qs.js"></script>
    <style>
        #app{
            width: 300px;
            margin: 0 auto ;
        }
        tr:nth-child(even){
            background-color: rgba(0,0,0,0.2);
        }
        tr:nth-child(odd){
            background-color: rgba(0,0,0,0.1);
        }
        h1{
            margin-left: 80px;
        }
        #delButton{
            width: 100px;
            margin: 20px auto
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>消息管理</h1>
        <table border="1" cellspacing="0">
            <tr>
                <th>选择</th>
                <th>编号</th>
                <th>内容</th>
                <th>发布日期</th>
            </tr>
            <tr v-for="me in MessageList">
                <td><input type="checkbox" v-model="selectId" :value="me.mid"/></td>
                <td>{{me.mid}}</td>
                <td>{{me.mocntent}}</td>
                <td>{{me.publish}}</td>
            </tr>
        </table>
        <div id="delButton"><input type="button" value="删除选定项" @click="del"/></div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            selectId:[],
            MessageList:[],
            cont:null
        },
        mounted(){
            axios.get("MessageServlet").then(result =>{
                this.MessageList = result.data;
            }).catch(error=>{
                alert(error);
            })
        },
        methods:{
            del(){
                if(confirm("确认要删除嘛？？？")){
                    $.ajax({
                        url:"MessageServlet",
                        data:{
                            selectId:this.selectId
                        },
                        type:"post",
                        dataType:"json",
                        success:(result)=>{
                            this.MessageList = result;
                            if(this.MessageList.length == 0){
                                alert("糟糕，数据都被删完啦QAQ！")
                            }else{
                                alert("成功删除选定的"+this.selectId.length+"条数据");
                            };
                            this.selectId = [];
                        },error(){
                            console.log("删除失败");
                        },
                        timeout:5000
                    });
                }else{
                    alert("你取消了删除");
                }
            }
        }
    });

</script>
</html>